<template>
  <div class="produce_supply">
    <el-dialog
      width="55%"
      title="生产补料申请"
      :visible.sync="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="picker_date">
        <span>要求送达时间：</span>
        <el-date-picker
          v-model="pickedDate"
          :picker-options="pickerOptions"
          :clearable="false"
          value-format="yyyy-MM-dd 23:59:59"
          type="date"
          size="small"
          placeholder="请选择要求送达时间">
        </el-date-picker>
      </div>
      <div class="table_container">
        <el-table
          :data="materialList"
          border
          max-height="441"
          tooltip-effect="dark"
          class="table_dialog">
          <mes-col-comp
            :key="index"
            v-for="(column, index) in tableColums"
            :column="column">
          </mes-col-comp>
          <el-table-column
            label="补料数量"
            align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model.trim.number="scope.row.quantity"
                placeholder="请输入补料数量"
                v-positive-int
                :controls="false"
                :min="1"
                :precision="0">
              </el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="mes_btn">
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableColums from './produceSupplyCols'
// 获取物料列表接口
let listInterFace = 'a/batchworkstagematerial/batchWorkstageMaterial/list'
// 提交补料列表接口
let saveInterFace = 'a/turnoverworkstage/turnoverWorkstage/supplymaterial'
export default {
  name: 'ProduceSupply',
  data() {
    return {
      dialogVisible: false,
      pickedDate: this.moment().format('YYYY-MM-DD 00:00:00'),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 3600 * 1000 * 24
        }
      },
      turnoverWorkstageId: '', // 记录
      turnoverBatchId: '', // 周转批次id
      tableColums: tableColums, // 表格列数组
    }
  },
  computed: {
    // 补料列表
    materialList() {
      return this.$store.state.workshopBench.materialList.list
    }
  },
  methods: {
    /**
     * 显示弹窗并接收传值
     */
    openDialog(data) {
      this.turnoverWorkstageId = data.id
      this.turnoverBatchId = data.turnoverId
      this.dialogVisible = true
      this.getMaterialList()
    },
    // 保存补料申请
    handleSubmit() {
      this.materialList.map((item) => {
        if (item.quantity === undefined) item.quantity = 0
      })
      if (this.materialList.reduce((prev, curr) => prev + curr.quantity, 0) === 0) {
        return this.$message.error({
          message: '请至少填写一条补料数量',
          duration: 1500,
          center: true
        })
      }
      let commitObj = {
        method: 'post',
        url: saveInterFace,
        data: {
          // 列表记录ID
          turnoverWorkstageId: this.turnoverWorkstageId,
          requireServiceDate: this.pickedDate,
          batchWorkstageMaterialList: this.materialList
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', commitObj).then(() => {
        this.$message({
          type: 'success',
          message: '补料成功',
          duration: 1500,
          center: true,
        })
        this.$emit('submitSuccess')
        this.dialogVisible = false
      })
    },
    // 获取物料列表
    getMaterialList() {
      let commitObj = {
        method: 'post',
        url: listInterFace,
        data: {
          pageSize: '10000',
          pageNo: '1',
          query: {
            turnoverBatchId: this.turnoverBatchId,
          }
        },
        module: 'workshopBench',
        state: 'materialList'
      }
      this.$store.dispatch('saveData', commitObj)
    }
  }
}
</script>

<style lang="less">
  .produce_supply {
    .picker_date {
      margin-bottom: 20px;
    }
    tr {
      td:nth-child(2) {
        .cell{
          padding-left: 15px!important;
        }
      }
    }
    td .cell {
      padding: 0 !important;
      background-color: #f5f7fa;
      .el-input__inner {
        background-color: #ffffff !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        &.error_input {
          color: @mesTableInputEFC;
        }
        &:focus {
          border: @mesTableInputFBorder;
        }
      }
    }
  }
</style>
